<template >
	<view class="logonpage">
		<view class="part01">
			注册账号
		</view>
		<view class="uname">
			<input v-model="uname" class="ps" placeholder="请输入名称" />
		</view>
		<view class="phone">
			<input v-model="utel" class="ps" placeholder="请输入手机号" />
		</view>
		<view class="mima">
			<input v-model="upassword" class="ps" type="password"  placeholder="设置密码" />
			<image src="../../static/images/闭眼睛.png"></image>
		</view>
		<view class="password">
			<input v-model="checkpassword" class="ps" type="password" placeholder="再次输入密码" />
		</view>
		<button class="log" @click="logclick">注册</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				uname:"",
				utel:"",
				upassword:"",
				checkpassword:""
			}
		},
		methods: {
			logclick() {
				
				uni.request({
					url:'http://127.0.0.1:3030/regist',
					method:'POST',
					data:{
						uname:this.uname,
						utel:this.utel,
						upassword:this.upassword,
						checkpassword:this.checkpassword
					},
					success:(res)=>{
						let result = res.data.msg
						console.log(result)
						if(result == "用户保存成功"){
							uni.showToast({
								title:result,
								icon:'success'
							}),
							// console.log(res.data.msg)
							//延迟2秒后执行跳转
							setTimeout(() => {
								uni.navigateTo({
									url:"../loginin/loginin"
								})
							},3000)
						}else if(result == "用户电话不能为空" || result == "用户密码不能为空" || result == "用户保存不成功"|| result == "用户名称不能为空"||result == "两次密码不一致"){
							uni.showToast({
								title:result,
								icon:'error'
							})
						}
					}
				})
				
			}
		}
	}
</script>

<style>
	/* 背景 */

.logonpage{
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: rgba(43,186,216, 0.3);
}
.part01{
	width: 400rpx;
	height: 200rpx;
	margin-left: 200rpx;
	margin-top: 200rpx;
	font-size: 100rpx;
	}
/*输入框 */
.logonpage input{
	height: 85rpx;
}
.uname{
	display:flex;
	width: 80%;
	height: 85rpx;
	margin-left: 70rpx;
	margin-top: 60rpx;
	align-items: center;
	border: 2rpx solid #000000;
}
.phone{
	display:flex;
	width: 80%;
	height: 85rpx;
	margin-left: 70rpx;
	margin-top: 60rpx;
	align-items: center;
	border: 2rpx solid #000000;
}

.password{
	display: flex;
	width: 80%;
	margin-left: 70rpx;
	margin-top: 60rpx;
	align-items: center;
	height: 85rpx;
	border: 2rpx solid #000000;
	
}
.ps{
	margin-left: 20rpx;
	
}

.mima{
	display: flex;
	width: 80%;
	height: 85rpx;
	margin-left: 70rpx;
	margin-top: 60rpx;
	border: 2rpx solid #000000;
	align-items: center;
	justify-content: space-between;
}
.mima image{
	width: 50rpx;
	height: 50rpx;
	margin-right: 20rpx;
}
.log{
	margin-top: 40rpx;
	width: 80%;
	background-color: #00A0FF;
	color: aliceblue;
}
.logclick :active{
	color: aquamarine;
}
</style>

